<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center wrongQuestion_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub wrongQuestion_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  wrongQuestion_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='wrongQuestion_fd0_0_c1'>确认预定</text>
				<view class='wrongQuestion_fd0_0_c2'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<uv-sticky bgColor="#fff" v-if="scrollTop > 150">
			<uv-transition :show="showTabs" mode="fade" duration="400">
				<uv-tabs :scrollable="false" :list="list1" @click="click" :current="current" :itemStyle="itemStyle"
					:activeStyle="activeStyle" lineColor="#FC5B03"></uv-tabs>
			</uv-transition>
		</uv-sticky>



		<view class="vehicle_information main0">
			<view class="car_content">
				<view class="car_name">
					<view class="car_name_1">大众 桑塔纳</view>
					<view class="car_name_2">
						<text>4座</text>
						<text class="car_name_2_1">丨</text>
						<text>自动挡</text>
						<text class="car_name_2_1">丨</text>
						<text>舒适型</text>
						<text class="car_name_2_1">丨</text>
						<text>2016款</text>
					</view>
				</view>
				<view class="car_img">
					<u-lazy-load height="120" border-radius="16" class="car_img" :image="imageUrl"
						:loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
					<image class="car_icon" :src='STATIC_URL+"220.png"' mode="aspectFill"></image>
				</view>
			</view>
			<view class="license_plate">
				<view class="plate_le">
					<image class="plate_le_1" :src='STATIC_URL+"227.png"'></image>
					<view class="plate_le_2">丨</view>
					<view class="plate_le_3">豫AP7624</view>
				</view>
				<view class="plate_ri">
					<image class="plate_ri_1" :src='STATIC_URL+"228.png"'></image>
					<view class="plate_ri_2">芝麻信用-免押租车</view>
				</view>
			</view>
		</view>
		<view class="car_date">
			<view class="date_content">
				<view class="date_item">
					<view class="date_item_1">04月29日</view>
					<view class="date_item_2">
						<text>今天</text>
						<text>18:00</text>
					</view>
				</view>
				<view class="date_days">
					<view class="days_line"></view>
					<view class="days_num">共3天</view>
					<view class="days_line"></view>
				</view>
				<view class="date_item">
					<view class="date_item_1">05月01日</view>
					<view class="date_item_2">
						<text>周三</text>
						<text>18:00</text>
					</view>
				</view>
			</view>
			<view class="quotation_information">
				<view class="information">
					<view class="information_2">
						<image :src='STATIC_URL+"225.png"' mode=""></image>
						<view class="information_2_1">取还车</view>
						<view class="information_2_2">
							<view class="information_2_2_1">送取车上门，距离门店965m</view>
							<view class="information_2_2_2">郑州市金水区高铁东站1号线明航路地铁口a口</view>
						</view>
					</view>
				</view>
				<view class="quotation_address">
					<image :src='STATIC_URL+"224.png"' mode="aspectFill"></image>
					<view class="address_text">地图导航</view>
				</view>
			</view>
		</view>
		<view class="guarantee main1">
			<view class="guarantee_title">车行保障</view>
			<view class="guarantee_content">
				<view class="service_title">
					<view class="title_1">
						服务内容
					</view>
					<view class="title_2">
						车损保障
					</view>
					<view class="title_2">
						三者保障
					</view>
					<view class="title_2">
						免折旧费
					</view>
					<view class="title_2">
						停运费
					</view>
					<view class="title_3">
						选择服务
					</view>
				</view>
				<view class="service_list">
					<scroll-view class="service_scroll" scroll-x="true">
						<view class="service_item" :class="k== 0 ? 'service_item_active' : ''" v-for="(v, k) in 5">
							<view class="item_1">
								<image :src='STATIC_URL+"229.png"' mode="aspectFill"></image>
								<view class="">基础服务</view>
							</view>
							<view class="item_2">
								2000元内自付
							</view>
							<view class="item_2">
								50万
							</view>
							<view class="item_2">
								5000元以下车损免收
							</view>
							<view class="item_2">
								<image :src='STATIC_URL+"232.png"' mode="aspectFill"></image>
								<image :src='STATIC_URL+"233.png"' mode="aspectFill"></image>
							</view>
							<view class="item_3">
								<template v-if="k == 0">
									<view class="item_3_1">30元/天</view>
									<view class="item_3_2">已包含</view>
								</template>
								<template v-else>
									<view class="item_3_3">30元/天</view>
									<view class="item_3_4">升级</view>
								</template>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="preferential">
			<view class="tip_title">优惠活动</view>
			<view class="coupon">
				<view class="coupon_le">
					红包/优惠券
				</view>
				<view class="coupon_ri">
					<image class="coupon_ri_1" :src='STATIC_URL+"234.png"'></image>
					<image :src='STATIC_URL+"208.png"'></image>
				</view>
			</view>
		</view>

		<view class="order_detail main2">
			<view class="tip_title">订单明细</view>
			<view class="order_item">
				<view class="order_item_le">基本租金</view>
				<view class="order_item_ri" @tap.stop="show=true">
					<span class="order_item_ri_1">查看价格日历</span>
					<span>￥320</span>
				</view>
			</view>
			<view class="order_item">
				<view class="order_item_le">基本保障服务费30*1</view>
				<view class="order_item_ri">
					<span>￥30</span>
				</view>
			</view>
			<view class="order_item">
				<view class="order_item_le">手续费</view>
				<view class="order_item_ri">
					<span>￥30</span>
				</view>
			</view>
			<view class="order_item">
				<view class="order_item_le">送车上门</view>
				<view class="order_item_ri">
					<span>￥0</span>
				</view>
			</view>
			<view class="order_line"></view>
			<view class="order_price">
				<span class="order_price_1">订单总价：</span>
				<span class="order_price_2">￥400</span>
			</view>
		</view>
		<view class="deposit">
			<view class="tip_title">押金支付方式</view>
			<view class="deposit_text">
				<image :src='STATIC_URL+"235.png"'></image>
				<view class="explain">
					<view class="explain_text">
						<view class="explain_text_1">到店免押金</view>
						<view class="explain_text_2">在线支付租金取车时到店扫码免押或者通过其他方式</view>
					</view>
					<image class="explain_icon" :src='STATIC_URL+"7.png"'></image>
				</view>
			</view>
		</view>
		<view class="notice main3">
			<view class="tip_title">预定须知</view>
			<view class="notice_item">
				<view class="notice_item_le">取消规则</view>
				<image :src='STATIC_URL+"208.png"'></image>
			</view>
			<view class="notice_item">
				<view class="notice_item_le">押金政策</view>
				<image :src='STATIC_URL+"208.png"'></image>
			</view>
			<view class="notice_item">
				<view class="notice_item_le">取车证件</view>
				<image :src='STATIC_URL+"208.png"'></image>
			</view>
			<view class="notice_item">
				<view class="notice_item_le">里程限制</view>
				<image :src='STATIC_URL+"208.png"'></image>
			</view>
		</view>

		<view class="money_footer">
			<view class="footer_le">
				<view class="footer_le_1">
					<text>￥</text>
					<text class="footer_le_1_1">350</text>
				</view>
				<view class="footer_le_2">
					押金￥10000
				</view>
			</view>
			<view class="footer_ri">
				<view class="footer_ri_1">明细</view>
				<view class="footer_ri_2" @tap.stop="buyShow=true">立即预订</view>
			</view>
		</view>
		<view style="height: 150rpx;"></view>


		<u-popup v-model="show" mode="center" border-radius="32">
			<view class="popup_view">
				<view class="popup_title">
					<view class="">价格日历</view>
					<u-icon @click="show=false" name="close"></u-icon>
				</view>
				<view class="popup_calendar">
					<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'></ren-calendar>
				</view>
			</view>
			
		</u-popup>
		
		<u-popup v-model="buyShow" mode="bottom" border-radius="32">
			<view class="popup_price">
				<view class="popup_title">
					<view class=""></view>
					<u-icon @click="buyShow=false" name="close" color="#999"></u-icon>
				</view>
				<view class="popup_money">
					<text class="money_1">￥</text>
					<text class="money_2">325</text>
				</view>
				<view class="pay_list">
					<view class="pay_item" v-for="(item, index) in payType" :key="index" @tap.stop="selectPay(item.id)">
						<view class="pay_item_le">
							<image :src='item.icon' mode=""></image>
							<text>{{item.name}}</text>
						</view>
						<image v-if="pay_id == item.id" class="pay_item_ri" :src='STATIC_URL+"7.png"' mode=""></image>
						<image v-else class="pay_item_ri" :src='STATIC_URL+"8.png"' mode=""></image>
					</view>
				</view>
				<view class="pay_btn flex align-center justify-center" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/reserveOrder/reserveSuccess`">立即支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import RenCalendar from '../components/ren-calendar/ren-calendar.vue'
	export default {
		data() {
			return {
				"loadingImg": "",
				"errorImg": "",
				"imageUrl": "https://n.sinaimg.cn/spider20240423/618/w1267h951/20240423/00f3-b0424ba924fbe8bb330e2dabf0f7b880.jpg",
				list1: [{
						name: '预定明细',
						id: '#tabs0'
					},
					{
						name: '车行保障',
						id: '#tabs1'
					}, {
						name: '订单明细',
						id: '#tabs2'
					},
					{
						name: '预定须知',
						id: '#tabs3'
					},
				],
				preActive: 0,
				currentActive: 0,
				//   为了解决点击滑动的bug，点击的时候，滑动里面不处理任何逻辑
				isTabChange: false,
				itemStyle: {
					'height': '78rpx',
					'fontSize': '26rpx',
					'color': '#666666'
				},
				activeStyle: {
					'color': '#111111',
					'fontWeight': 'bold'
				},
				scrollTop: 0, // 页面滚动距离
				showTabs: true,
				current: 0,
				tops: [],
				throttle: false,

				show: false,
				curDate: '',
				markDays: [],
				
				buyShow: false,
				payType: [
					{
						name: '微信支付',
						icon: 'https://speed.zhongchuxing.com/gjdimages/264.png',
						id: 1
					},
					{
						name: '支付宝支付',
						icon: 'https://speed.zhongchuxing.com/gjdimages/265.png',
						id: 2
					},
					{
						name: '抖音支付',
						icon: 'https://speed.zhongchuxing.com/gjdimages/263.png',
						id: 3
					}
				],
				pay_id: 1,
			}
		},
		components: {
			RenCalendar
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			//节流方法
			if (!this.throttle) {
				this.throttle = true;
				setTimeout(() => {
					this.throttle = false;
				}, 210);
				for (let i = 0; i < this.list1.length; i++) {
					if (i == this.list1.length - 1) {
						if (e.scrollTop >= this.tops[i] - uni.upx2px(170)) {
							this.current = i;
						}
						return;
					}
					if (
						e.scrollTop >= this.tops[i] - uni.upx2px(170) &&
						e.scrollTop < this.tops[i + 1] - uni.upx2px(170)
					) {
						this.current = i;
					}
				}
			}
		},
		onLoad() {
			setTimeout(() => {
				this.list1.forEach((item, index) => {
					uni.createSelectorQuery()
						.select(".main" + index)
						.boundingClientRect(res => {
							// console.log("resresres==》", res);
							this.tops.push(Math.round(res.top));
						})
						.exec();
				})
			}, 800)
		},
		methods: {
			click(item) {
				this.current = item.index;
				uni.createSelectorQuery().select(".main" + item.index).boundingClientRect((data) => {
						let pageScrollTop = Math.round(data.top);
						uni.pageScrollTo({
							scrollTop: pageScrollTop + this.scrollTop - uni.upx2px(170), //滚动高度
							duration: 200, //过渡时间
						});
						this.throttle = true;
						setTimeout(() => {
							this.throttle = false;
						}, 1000);
					})
					.exec();

			},
			onDayClick(data) {
				this.curDate = data.date;
			},
			selectPay(id) {
				this.pay_id = id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .slidertab {
	//   background: #f5f9fd;
	//   border-radius: 16px 16px 0px 0px;
	//   padding: 0 32px;

	// }
	.popup_price {
		background: #F6F7FB !important;
		padding-bottom: 32rpx;
		.popup_money {
			display: flex;
			align-items: center;
			justify-content: center;
			.money_1 {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
			}
			.money_2 {
				font-weight: bold;
				font-size: 64rpx;
				color: #000000;
			}
		}
		.pay_list {
			background: #fff;
			padding: 8rpx 24rpx;
			border-radius: 16rpx;
			margin: 32rpx 32rpx 42rpx;
			.pay_item {
				padding: 24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.pay_item_le {
					display: flex;
					align-items: center;
					image {
						width: 52rpx;
						height: 52rpx;
						margin-right: 20rpx;
					}
					text {
						font-weight: 500;
						font-size: 30rpx;
						color: #111111;
					}
				}
				.pay_item_ri {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.pay_btn {
			width: 692rpx;
			height: 96rpx;
			background: #FC5B03;
			border-radius: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.popup_view {
		width: 642rpx;
	}

	.popup_title {
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		padding: 32rpx 32rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.popup_calendar {
		padding: 0 8rpx 12rpx;
	}

	.u_tabs {
		height: 78rpx;
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		background-color: #fff;

		.tab_item {
			flex: 1;
			background-color: #fff;

			// line-height: 100px;
			&.active {
				background-color: rgb(55, 185, 169);
			}
		}
	}

	.vehicle_information {
		padding: 24rpx;
		width: 100%;
		height: 260rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/226.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.car_content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.car_name {
				.car_name_1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.car_name_2 {
					margin-top: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #111;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.car_name_2_1 {
						color: #CCCCCC;
					}
				}
			}

			.car_img {
				width: 192rpx;
				height: 144rpx;
				position: relative;

				.car_icon {
					width: 80rpx;
					height: 18rpx;
					position: absolute;
					top: 8rpx;
					left: 8rpx;
				}
			}
		}

		.license_plate {
			width: 702rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			padding: 16rpx 20rpx;
			border-radius: 16rpx;
			position: absolute;
			left: 24rpx;
			bottom: 0;

			.plate_le {
				display: flex;
				align-items: center;

				.plate_le_1 {
					width: 40rpx;
					height: 40rpx;
				}

				.plate_le_2 {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
				}

				.plate_le_3 {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
				}
			}

			.plate_ri {
				background: rgba(26, 102, 250, 0.05);
				border-radius: 4rpx;
				padding: 4rpx 8rpx;
				display: flex;
				align-items: center;

				.plate_ri_1 {
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
				}

				.plate_ri_2 {
					font-weight: 500;
					font-size: 22rpx;
					color: #1A66FA;
				}
			}
		}
	}

	.car_date {
		background: #fff;
		margin: 20rpx 24rpx;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;

		.date_content {
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 20rpx 54rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.date_item {
				.date_item_1 {
					font-size: 34rpx;
					font-weight: bold;
					color: #111111;
				}

				.date_item_2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: #999;
				}
			}

			.date_days {
				display: flex;
				align-items: center;

				.days_line {
					width: 24rpx;
					height: 2rpx;
					background: #CCCCCC;
					border-radius: 2rpx;
				}

				.days_num {
					padding: 6rpx 34rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 2rpx solid #CCCCCC;
					font-size: 26rpx;
					color: #111111;
				}
			}
		}

		.quotation_information {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.information {
				.information_2 {
					display: flex;
					margin-top: 16rpx;

					image {
						width: 18rpx;
						height: 12rpx;
						transform: translateY(12rpx);
					}

					.information_2_1 {
						font-weight: bold;
						font-size: 26rpx;
						color: #111111;
						margin: 0 12rpx 0 8rpx;
					}

					.information_2_2 {
						width: 434rpx;

						.information_2_2_1 {
							font-weight: bold;
							font-size: 26rpx;
							color: #FC5B03;
						}

						.information_2_2_2 {
							font-weight: 500;
							font-size: 26rpx;
							color: #111111;
							margin-top: 12rpx;
						}
					}
				}
			}

			.quotation_address {
				text-align: center;
				padding-top: 16rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-bottom: 8rpx;
				}

				.address_text {
					font-weight: 400;
					font-size: 20rpx;
					color: #1A66FA;
				}
			}

		}
	}

	.guarantee {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 24rpx 20rpx;
		padding: 24rpx 20rpx;

		.guarantee_title {
			font-weight: bold;
			font-size: 30rpx;
			color: #111111;
			margin-bottom: 20rpx;
		}

		.guarantee_content {
			background: linear-gradient(90deg, #FFF8F5 0%, #FFFFFF 21%);
			border: 2rpx solid transparent;
			border-radius: 16rpx;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			background-image: linear-gradient(90deg, #FFF8F5 0%, #FFFFFF 21%), linear-gradient(270deg, rgba(247, 247, 247, 1), rgba(246, 247, 251, 1));
			display: flex;

			.service_title {
				width: 140rpx;

				.title_1 {
					width: 140rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					padding: 8rpx;
					border-bottom: 2rpx solid #eee;
				}

				.title_2 {
					width: 140rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					padding: 8rpx;
				}

				.title_3 {
					width: 140rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 26rpx;
					color: #111111;
					padding: 8rpx;
					border-top: 2rpx solid #eee;
				}
			}

			.service_list {
				width: calc(100% - 140rpx);

				.service_scroll {
					white-space: nowrap;
				}

				.service_item {
					display: inline-block;
					width: 172rpx;

					.item_1 {
						height: 158rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-bottom: 2rpx solid #eee;
						padding: 8rpx;
						text-align: center;
						white-space: normal;

						image {
							width: 52rpx;
							height: 52rpx;
						}

						view {
							font-weight: bold;
							font-size: 22rpx;
							color: #000000;
						}
					}

					.item_2 {
						font-size: 22rpx;
						color: #111111;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 8rpx;
						text-align: center;
						white-space: normal;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.item_3 {
						height: 158rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 8rpx;
						text-align: center;
						border-top: 2rpx solid #eee;

						.item_3_1 {
							font-weight: bold;
							font-size: 22rpx;
							color: #000000;
						}

						.item_3_2 {
							margin-top: 8rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #FC5B03;
							width: 92rpx;
							height: 40rpx;
						}

						.item_3_3 {
							font-weight: bold;
							font-size: 22rpx;
							color: #EF2E28;
						}

						.item_3_4 {
							margin-top: 8rpx;
							width: 92rpx;
							height: 40rpx;
							background: #FC5B03;
							border-radius: 38rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
						}
					}
				}

				.service_item_active {
					border: 2rpx solid transparent;
					border-radius: 16rpx;
					background-clip: padding-box, border-box;
					background-origin: padding-box, border-box;
					background-image: linear-gradient(to right, rgba(246, 247, 251, 1), rgba(246, 247, 251, 1)), linear-gradient(90deg, rgba(253, 150, 2, 1), rgba(252, 91, 3, 1));
				}
			}
		}
	}

	.preferential {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 0 24rpx;

		.coupon {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.coupon_le {
			font-weight: 500;
			font-size: 26rpx;
			color: #111111;
		}

		.coupon_ri {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.coupon_ri_1 {
				width: 140rpx;
				height: 40rpx;
			}
		}
	}

	.order_detail {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;

		.order_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.order_item_le {
				font-size: 26rpx;
				color: #111111;
			}

			.order_item_ri {
				font-weight: bold;
				font-size: 26rpx;
				color: #111111;

				.order_item_ri_1 {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
					margin-right: 16rpx;
				}
			}
		}

		.order_line {
			width: 100%;
			height: 2rpx;
			background: #E7E7E7;
		}

		.order_price {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 20rpx;

			.order_price_1 {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}

			.order_price_2 {
				font-weight: bold;
				font-size: 30rpx;
				color: #EF2E28;
			}
		}
	}

	.deposit {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;

		.deposit_text {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.explain {
				width: calc(100% - 40rpx);
				padding-left: 12rpx;
				display: flex;
				align-items: center;

				.explain_icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 48rpx;
				}

				.explain_text {
					.explain_text_1 {
						font-weight: bold;
						font-size: 26rpx;
						color: #111111;
					}

					.explain_text_2 {
						margin-top: 12rpx;
						font-size: 22rpx;
						color: #666666;
						line-height: 26rpx;
					}
				}
			}
		}
	}

	.notice {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;

		.notice_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;

			.notice_item_le {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.money_footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0;
		background: #fff;
		z-index: 10;
		padding: 0 24rpx 0 48rpx;

		.footer_le {
			.footer_le_1 {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #EF2E28;

				.footer_le_1_1 {
					font-weight: bold;
					font-size: 48rpx;
					color: #EF2E28;
				}
			}

			.footer_le_2 {
				font-weight: 500;
				font-size: 26rpx;
				color: #FC5B03;
			}
		}

		.footer_ri {
			display: flex;
			align-items: center;

			.footer_ri_1 {
				font-weight: 400;
				font-size: 26rpx;
				color: #1A66FA;
			}

			.footer_ri_2 {
				margin-left: 24rpx;
				width: 240rpx;
				height: 84rpx;
				background: #FC5B03;
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
			}
		}
	}

	.tip_title {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
		margin-bottom: 32rpx;
	}

	.wrongQuestion_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.wrongQuestion_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
		line-height: 36rpx;
		width: 135rpx;
	}

	.wrongQuestion_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111;
		line-height: 50rpx;
	}

	.wrongQuestion_fd0_0_c2 {
		width: 135rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		text-align: right;
	}

	.wrongQuestion_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 2000;
		top: 0rpx;
		background: #fff;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background-size: 100% auto !important;
		background-color: #F6F7FB;
	}
</style>